import { doRobotScriptEdit, fetchRobotScriptInfo } from "@/services/robotManagement";
import { Button, Divider, Form, Input,message } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class ScriptSetting extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      detail:{}
    }
  }

  componentDidMount(){
    this.getScriptInfo()
  }

  getScriptInfo = async () => {
    const { applicationId } = this.props;
    const res = await fetchRobotScriptInfo({applicationId})
    this.props.form.setFieldsValue({
      unknownQuestionReply:res.unknownQuestionReply,
    })
    this.setState({
      detail:res
    })
  }

  doSaveForm = () => {
    this.props.form.validateFields(async (error,values) => {
      if(!error){
        const { detail } = this.state;
        let obj = {...values,id:detail.id}
        const res = await doRobotScriptEdit(obj)
        message.info(res.message);
      }
    })
  }

  render(){
    const { getFieldDecorator,getFieldValue } = this.props.form;
    const titleStyle = {
      paddingLeft:'10px',
      borderLeft:'2px solid',
      marginBottom:24
    }
    const titleFont = {
      fontWeight:'bold'
    }
    const titleTips = {
      fontSize:'12px',
      color:'#999999'
    }
    const btnLayout = {
      labelCol: { span: 3 },
			wrapperCol: { span: 19,offset:1},
    }
    return(
      <div>
        <Form {...btnLayout}>
          <div style={titleStyle}>
            <span style={titleFont}>未知问题话术</span>
            {
              /**
               * <span style={titleTips}>当机器人找不到任何合适的回答时，就会说出"未知回复"的内容。在"未知回复"中：可以请用户重新描述他的需求，可以提示用户应该如何提问。最多可以添加5条话术。当有多条话术时，机器人会随机出话</span>
               */
            }
          </div>
          <Form.Item>
            {
              getFieldDecorator("unknownQuestionReply", { rules: [{ required: true, message: "请输入未知问题话术"}]})(
                <Input placeholder='请输入未知问题话术' style={{ width: 300}} />
              )
            }
          </Form.Item>
          <Divider style={{marginTop:0}} />
          <Form.Item>
            <Button type="primary" onClick={this.doSaveForm}>{formatMessage({ id: 'appearanceSettings.left.save' })}</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default Form.create()(ScriptSetting)